<template>
  <div>
    <h3 class="title">App组件</h3>
    <hr />
    <child :users="users">
      <button slot="del" slot-scope="index" @click="del(index)">删除</button>
      <!-- <template v-slot:del="index"> -->
        <!-- <template v-slot:[变量]="index"> -->
      <!-- <template #del="index">
        <button @click="del(index)">删除</button>
      </template> -->
    </child>
  </div>
</template>

<script>
// 同步导入
import child from './components/child.vue'
export default {
  components: {
    child
  },
  data() {
    return {
      users: [
        { id: 1, name: '张在' },
        { id: 2, name: '李四' },
        { id: 3, name: '王五' }
      ]
    }
  },
  methods: {
    del({ index }) {
      console.log('app', index)
    }
  }
}
</script>

<style lang="scss" scoped></style>
